<template>
	<div class="oral_broadcasting">
		<div :style="materialItemStyle" v-if="materialList.length > 0" class="broadcast_con" @dragleave="dragLeave"
			@dragover.prevent="dragOver" @drop="onDrop">
			<div class="material_item" v-for="(item, index) in materialList">
				<div class="play_icon" @click="previewMaterial(item)">
					<cu-icon class="icon is_hover" type="icon-bofang"
						style="font-size: 20px; cursor: pointer; color: #fff;" />
					<cu-icon class="icon is_default" type="icon-koubo"
						style="font-size: 20px; cursor: pointer; color: #fff;" />
				</div>
				<div class="audio_name">{{ item.material_name }}</div>
				<div class="is_recognized" v-if="item?.audio_text?.captions?.captionsShow?.length">
					已识别字幕
				</div>
				<div class="no_recognized" v-else>未识别字幕</div>
				<div class="duration_txt">{{ item.material_duration_text }}</div>
				<div class="verticle_line"></div>
				<div class="audio_to_text">
					<cu-icon @click="recognizeWord(item)" class="icon is_default" type="icon-wenzishibie"
						style="font-size: 16px; cursor: pointer" />
				</div>
				<div class="close_icon" @click="deleteAudio(index)">
					<CloseOutlined />
				</div>
			</div>
		</div>

		<div :style="materialItemStyle" v-else class="broadcast_con_add" @dragleave="dragLeave"
			@dragover.prevent="dragOver" @drop="onDrop">
			<PlusOutlined style="color: #2878FFff" v-if="
          dragStatus.isDragging && dragStatus.element.material_type == 'audio'
        " />
			<span style="font-size: 14px" v-else>请从左侧拖入口播</span>
		</div>

		<materialPreview :visible="previewVisible" :materialDetail="materialDetail" @close="closePreview" />
		<recognizeWord :visible="recognizeVisible" :materialDetail="materialDetail" @close="closeRecognize" />
		<warmTips :visible="tipsVisible" @close="handleTipsClose" />
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		nextTick,
	} from "vue";
	import {
		DeleteOutlined,
		PlusOutlined,
		CloseOutlined,
	} from "@ant-design/icons-vue";
	import store from "@/store";
	import {
		message
	} from "ant-design-vue";
	import materialPreview from "../../sourceMaterial/modules/materialPreview.vue";
	import recognizeWord from "./recognizeWord.vue";
	import warmTips from '../modules/warmTips.vue';
	export default defineComponent({
		components: {
			DeleteOutlined,
			PlusOutlined,
			CloseOutlined,
			materialPreview,
			recognizeWord,
			warmTips
		},
		setup(props, context) {
			const state = reactive({
				materialList: [],
				isHover: false,
				previewVisible: false,
				materialDetail: {},
				recognizeVisible: false,
				tipsVisible: false,
				temporaryList: []
			});

			watch(
				() => store.getters.clipJSON.audio,
				(val) => {
					state.materialList = val;
					context.emit("updateNumber", {
						type: "broad",
						count: state.materialList.length,
					});
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => state.materialList,
				(val) => {
					store.dispatch("SetClipJsonAudioData", val);
				}, {
					deep: true,
					immediate: true
				}
			);

			const deleteAudio = (index) => {
				state.materialList.splice(index, 1);
				context.emit("updateNumber", {
					type: "broad",
					count: state.materialList.length,
				});
			};

			const previewMaterial = (item) => {
				state.previewVisible = true;
				state.materialDetail = item;
			};

			const closePreview = () => {
				state.previewVisible = false;
				state.materialDetail = {};
			};
			
			const handleTipsClose = (type) => {
				state.tipsVisible = false
				if(type == 'confirm'){
					if (dragStatus.value.element?.material_type != "audio") return;
					let arr = state.materialList;
					let arrId = state.materialList.map((item) => item.id);
					let flag_1 = false,
						flag_2 = false;
					state.temporaryList.map((item) => {
						if (item.checked && arrId.indexOf(item.id) != -1) {
							flag_1 = true;
						}
						if (item.checked && arrId.indexOf(item.id) == -1) {
							flag_2 = true;
							arr.push(item);
						}
					});
					state.materialList = arr;
					context.emit("updateNumber", {
						type: "broad",
						count: state.materialList.length,
					});
					if (flag_1) {
						message.success("部分素材重复添加，已自动剔除！");
					}
					if (!flag_1 && flag_2) {
						message.success("操作成功！");
					}

					dragStatus.value?.callback();
					nextTick(() => {
						state.isHover = false;
					});
				}
			}

			const onDrop = (e) => {
				e.preventDefault(); // 阻止浏览器默认行为
				state.temporaryList = JSON.parse(JSON.stringify(dragStatus.value.materialList))
				let resource_data = store.getters.clipJSON?.resource_data
				let index = -1
				if(resource_data?.length){
					index = resource_data.findIndex(item=>item.items?.length)
				}
				if(index != -1){
					state.tipsVisible = true
				} else {
					handleTipsClose('confirm')
				}
			};

			const dragOver = () => {
				state.isHover = true;
			};

			const dragLeave = () => {
				state.isHover = false;
			};

			const recognizeWord = (item) => {
				state.recognizeVisible = true;
				state.materialDetail = item;
			};

			const closeRecognize = (obj) => {
				state.recognizeVisible = false;
				state.materialDetail = {};
				store.dispatch("RefrashResource", !store.getters.reloadResource);
				if (obj) {
					console.log(obj,'obj');
					state.materialList.map((item) => {
						if (item.id == obj.item.id) {
							if (!item.audio_text) {
								item.audio_text = {};
								item.audio_text.id = 1;
								item.audio_text.captions = {};
								item.audio_text.captions["captionsShow"] = obj.captions.captionsShow;
								item.audio_text.captions["captions"] = obj.captions.captions;
							} else {
								item.audio_text.captions["captionsShow"] = obj.captions.captionsShow;
								item.audio_text.captions["captions"] = obj.captions.captions;

							}
						}
					});
				}
			};

			const dragStatus = computed(() => store.getters.dragStatus);
			const materialItemStyle = computed(() => {
				return {
					border: dragStatus.value.isDragging &&
						state.isHover &&
						dragStatus.value.element.material_type == "audio" ?
						"1px solid #2878FFFF" :
						dragStatus.value.isDragging &&
						dragStatus.value.element.material_type == "audio" ?
						"1px dashed #2878FFFF" :
						"1px dashed #5f5f5f",
				};
			});
			
			return {
				...toRefs(state),
				deleteAudio,
				materialItemStyle,
				dragStatus,
				onDrop,
				dragOver,
				dragLeave,
				previewMaterial,
				closePreview,
				recognizeWord,
				closeRecognize,
				handleTipsClose
			};
		},
	});
</script>

<style lang="less">
	.oral_broadcasting {
		display: flex;
		align-items: center;
		justify-content: center;

		.broadcast_con_add {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			border: 1px dashed #5f5f5f;
			width: 97%;
			height: 250px;
			margin-top: 20px;
			background-color: #2b2b2e;
			border-radius: 5px;
			color: #fff;
		}

		.broadcast_con {
			border: 1px dashed #5f5f5f;
			width: 97%;
			height: 250px;
			margin-top: 20px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			align-content: flex-start;
			flex-wrap: wrap;
			color: #b9bbc1;
			background-color: #2b2b2e;
			border-radius: 5px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.material_item {
				padding: 10px;
				display: flex;
				align-items: center;
				margin-left: 10px;
				margin-top: 10px;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 5px;

				.play_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30px;
					height: 30px;
					border-radius: 50px;
					background: #2a4f3b;

					.is_hover {
						display: none;
					}

					.is_default {
						display: block;
					}

					&:hover {
						background: #268652;

						.is_hover {
							display: block;
						}

						.is_default {
							display: none;
						}
					}
				}

				.audio_name {
					color: #fff;
					font-size: 12px;
					margin: 0 10px;
				}

				.is_recognized {
					background: rgba(84, 255, 173, 0.2);
					border-radius: 2px;
					font-size: 12px;
					color: #54ffad;
					font-size: 12px;
					padding: 3px 10px;
				}

				.no_recognized {
					background: rgba(255, 197, 84, 0.2);
					border-radius: 2px;
					font-size: 12px;
					color: #ffc554;
					font-size: 12px;
					padding: 3px 10px;
				}

				.duration_txt {
					color: #fff;
					font-size: 12px;
					margin: 0 10px;
				}

				.verticle_line {
					height: 15px;
					width: 1px;
					background-color: #888;
					border: none;
					margin: 0 10px;
				}

				.audio_to_text {
					width: 30px;
					height: 30px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;

					&:hover {
						background: rgba(255, 255, 255, 0.12);
					}
				}

				.close_icon {
					width: 30px;
					height: 30px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					transition: all 0.3s;

					&:hover {
						background: rgba(255, 255, 255, 0.12);
					}
				}
			}
		}
	}
</style>